<template>
  <div>
    <h1>基础表格</h1>
    <el-table :data="userlist" style="width: 100%" border>
      <el-table-column prop="id" label="#" width="180"></el-table-column>
      <el-table-column
        prop="username"
        label="用户"
        width="180"
      ></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
          {{ scope.row.createTime | chuo }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pagination
      :total="total"
      @num="handleCurrentChange"
    ></pagination>
  </div>
</template>
<script>
import pagination from "./component/pagination";
import { userList } from "@/api/api";
export default {
  name: "",
  components: { pagination },
  props: [],
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      userlist: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data: res } = await userList(
        `/api/user/list.do?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
      );
      console.log(res)
      this.userlist = res.data.list;
      this.total = res.data.total;
    },
    // handleSizeChange(val) {
    //   this.pageSize = val;
    //   this.getList();
    // },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.getList();
    },
  },
  filters: {
    chuo: function (val) {
      var time = new Date(val);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return `${y}-${m}-${d} ${h}:${mm}:${s}`;
    },
  },
};
</script>
<style scoped>
</style>